<template>
  <div ref="flowNode" style="width: 90%; margin-left: 10px;" >
    <el-steps direction="vertical" :active="1" v-loading="loading" :style="loadingStyle">
      <template v-for="(node, nodeindex) in nodes">
        <template v-if="node.length === undefined">
          <el-step :status="node.status == 1 ? 'wait' : 'finish'">
            <template v-if="filterNull(node.logs).flag == 3">
              <div slot="title">
                抄送
                <span style="float: right;font-size: 12px;color: #ccc;">{{filterNull(node.logs).createTime}}</span>
              </div>
              <div slot="description" style="color: #000;display: inline-block;">{{filterNull(node.logs).ccOperators}}</div>
              <!--            审批内容-->
              <div>{{}}</div>
            </template>
            <template v-else>
              <div slot="title">
                {{node.name}}
                <span v-if="filterNull(node.logs).flag == 4" style="display: inline-block;margin-left: 5px;font-size: 12px;padding: 0 6px;background: #eee;color: #999;font-weight: normal;">转交</span>
                <span v-if="filterNull(node.logs).flag == 2" style="display: inline-block;margin-left: 5px;font-size: 12px;padding: 0 6px;background: #eee;color: #999;font-weight: normal;">拒绝</span>
                <span style="float: right;font-size: 12px;color: #ccc;">{{filterNull(node.logs).createTime}}</span>
              </div>
              <template v-if="node.status == 1">
                <div slot="description" style="color: #000;display: inline-block;">
                  {{filterNull(node.logs).operator}}
                  <!--            审批内容-->
                  <span style="color: #969696;">{{filterNull(node.logs).description}}</span>
                  <div v-if="node.logs != null && filterNull(node.logs).files.length > 0" style="padding: 5px 8px;background: rgb(250, 250, 250);">
                    <template v-for="(fil, index) in node.logs.files">
                      <el-image v-if="fil.typeFile == 1" z-index="3000" style="width: 30px; height: 30px;cursor: pointer;margin:3px;" :src="packFileUrl(fil.urlSuolu)" :preview-src-list="node.logs.urlArr"></el-image>
                      <div v-else @click="showFile(fil.url)" style="padding-right: 5px;color: #0066CC;cursor: pointer;">{{fil.fileName}}</div>
                    </template>
                  </div>
                  <!-- 审批记录评论 -->
                  <div v-if="node.logs != null" style="background: #fafafa;padding: 0 5px;">
                    <template v-for="(mesg, logindex) in node.logs.logs">
                      <template v-if="mesg.cancelStatus == 1">
                        <div style="font-size: 12px; color: #999;overflow: auto;">
                          <span style="color:#006699;">{{mesg.replyer}}：</span>
                          <span style="display: inline-block;line-height: 18px;">{{mesg.content}}</span>
                          <span v-if="userId == mesg.replyId" @tap="pullback(mesg.id)" class="min-btn">撤回</span>
                          <span style="float: right; padding-left: 5px;font-size: 10px;color: #c8c8c8;">
												{{mesg.replyTime}}
											</span>
                        </div>
                        <!-- 审批记录评论附件 -->
                        <div class="exp uploaderFiles" style="display: inline-block;" v-if="filterNull(mesg.files).length > 0">
                          <template v-for="(fil, index) in mesg.files">
                            <el-image v-if="fil.typeFile == 1" z-index="3000" style="width: 30px; height: 30px;cursor: pointer;margin:3px;" :src="packFileUrl(fil.urlSuolu)" :preview-src-list="mesg.urlArr"></el-image>
                            <div v-else @click="showFile(fil.url)" style="padding-right: 5px;color: #0066CC;cursor: pointer;">{{fil.fileName}}</div>
                          </template>
                        </div>
                      </template>
                      <template v-if="mesg.cancelStatus == 0">
                        <div style="font-size: 12px; color: #999;overflow: auto;">
                          <span style="color:#006699;">{{mesg.replyer}}：</span>
                          <span style="display: inline-block;line-height: 18px;">已于 {{mesg.cancelDate}} 撤回评论</span>
                        </div>
                      </template>
                    </template>
                  </div>
                </div>
              </template>
              <template v-else>
                <template v-for="(oper, operIndex) in node.operators">
                  <div v-if="operIndex == 0" slot="description" style="color: #000;display: inline-block;">{{oper && oper.nickName}}</div>
                  <div v-else slot="description" style="color: #000;display: inline-block;">
                    <div style="display: inline-block;padding: 0 3px;">|</div>
                    {{oper && oper.nickName}}
                  </div>
                </template>
              </template>
            </template>
          </el-step>
        </template>
        <template v-else>
          <template v-for="node1 in node">
            <template v-if="node1.flag !== 0">
              <el-step :status="node1.status == 1 ? 'wait' : 'finish'">
                <div slot="title">
                  {{node1.name}}
                  <span style="float: right;font-size: 12px;color: #ccc;">{{filterNull(node1.logs).createTime}}</span>
                </div>
                <template v-if="node1.status == 1">
                  <div slot="description" style="color: #000;display: inline-block;">
                    {{filterNull(node1.logs).operator}}
                    <!--            审批内容-->
                    <span style="color: #969696;">{{filterNull(node1.logs).description}}</span>
                    <div v-if="node1.logs != null && filterNull(node1.logs).files.length > 0" style="padding: 5px 8px;background: rgb(250, 250, 250);">
                      <template v-for="(fil, index) in node1.logs.files">
                        <el-image v-if="fil.typeFile == 1" z-index="3000" style="width: 30px; height: 30px;cursor: pointer;margin:3px;" :src="packFileUrl(fil.urlSuolu)" :preview-src-list="node1.logs.urlArr"></el-image>
                        <div v-else @click="showFile(fil.url)" style="padding-right: 5px;color: #0066CC;cursor: pointer;">{{fil.fileName}}</div>
                      </template>
                    </div>
                    <!-- 审批记录评论 -->
                    <div v-if="node1.logs != null" style="background: #fafafa;padding: 0 5px;">
                      <template v-for="(mesg, logindex) in node1.logs.logs">
                        <template v-if="mesg.cancelStatus == 1">
                          <div style="font-size: 12px; color: #999;overflow: auto;">
                            <span style="color:#006699;">{{mesg.replyer}}：</span>
                            <span style="display: inline-block;line-height: 18px;">{{mesg.content}}</span>
                            <span v-if="userId == mesg.replyId" @tap="pullback(mesg.id)" class="min-btn">撤回</span>
                            <span style="float: right; padding-left: 5px;font-size: 10px;color: #c8c8c8;">
												{{mesg.replyTime}}
											</span>
                          </div>
                          <!-- 审批记录评论附件 -->
                          <div class="exp uploaderFiles" style="display: inline-block;" v-if="filterNull(mesg.files).length > 0">
                            <template v-for="(fil, index) in mesg.files">
                              <el-image v-if="fil.typeFile == 1" z-index="3000" style="width: 30px; height: 30px;cursor: pointer;margin:3px;" :src="packFileUrl(fil.urlSuolu)" :preview-src-list="mesg.urlArr"></el-image>
                              <div v-else @click="showFile(fil.url)" style="padding-right: 5px;color: #0066CC;cursor: pointer;">{{fil.fileName}}</div>
                            </template>
                          </div>
                        </template>
                        <template v-if="mesg.cancelStatus == 0">
                          <div style="font-size: 12px; color: #999;overflow: auto;">
                            <span style="color:#006699;">{{mesg.replyer}}：</span>
                            <span style="display: inline-block;line-height: 18px;">已于 {{mesg.cancelDate}} 撤回评论</span>
                          </div>
                        </template>
                      </template>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <template v-for="(oper, operIndex) in node1.operators">
                    <div v-if="operIndex == 0" slot="description" style="color: #000;display: inline-block;">{{oper && oper.nickName}}</div>
                    <div v-else slot="description" style="color: #000;display: inline-block;">
                      <div style="display: inline-block;padding: 0 3px;">|</div>
                      {{oper && oper.nickName}}
                    </div>
                  </template>
                </template>
              </el-step>
            </template>
          </template>
        </template>
      </template>
    </el-steps>
  </div>
</template>

<script>
import { addClass, removeClass } from '@/utils'
import { getNodes } from '@/api/flow/node'

export default {
  name: 'FlowNode',
  data() {
    return {
      nodes: [],
      userId: '',
      currPullId: '',
      showPullbackModal: false,
      loading:true,
      loadingStyle:{
        marginTop:'40%'
      }
    }
  },
  props: [
    'flowid',
    'orderid',
    'orgId',
    'deptId',
    'platformId'
  ],
  components:{
  },
  onLoad() {
    console.log('onLoad')
  },
  onShow() {
    console.log('onShow')
  },
  created() {
    console.log('FlowNode created')
  },
  mounted() {
    console.log('FlowNode mounted')
    this.getNodes();
  },
  methods: {
    pullback(id) {
      this.showPullbackModal = true;
      this.currPullId = id;
    },
    doPullback() {
      this.$post(`/flow/optlog/cancelReply/${this.currPullId}`).then(async (res) => {
        if (res.data.code == 200) {
          await this.getNodes();
          this.showPullbackModal = false;
        } else {
          this.toast("撤回失败");
          this.showPullbackModal = false;
        }
      });
    },
    packNodesName(nodes) {
      return nodes.map(item => {
        return item.name;
      }).join('/');
    },
    packNodeFlag(node) {
      let stats = true;
      if (node.length === undefined) {
        stats = node.flag !== 0;
      } else {
        stats = node.some(item => {
          return item.flag !== 0;
        });
      }
      return stats;
    },
    async getNodes() {
      this.loading=true;
      let postParam = {
        flowid: this.flowid,
        orderid: this.orderid,
      }
      if (this.platformId) {
        postParam.platformId = this.platformId;
      }
      await getNodes(postParam).then((res) => {
        console.log('res:', res)
        if (res.code == 200) {
          //供应商不展示流程
          // if (uni.getStorageSync('userType') != '02') {
            this.nodes = res.data.map(item => {
              if (item.logs && item.logs.files) {
                item.logs.urlArr = item.logs.files.map(fil => {
                  if (fil.typeFile == 1) {
                    return this.packFileUrl(fil.url);
                  }
                }).filter(url => {
                  return url != undefined;
                })
              }
              if(item.logs && item.logs.logs) {
                item.logs.logs = item.logs.logs.map(item => {
                  item.urlArr = item.files.map(fil => {
                    if (fil.typeFile == 1) {
                      return this.packFileUrl(fil.url);
                    }
                  }).filter(url => {
                    return url != undefined;
                  })
                  return item;
                })
              }
              return item;
            });
            console.log('nodes:', this.nodes)
          // }
          this.loading=false;
          this.loadingStyle={marginTop: 0}
        } else {
          this.msgInfo("获取流程节点数据失败");
        }
      });
    }
  }
}
</script>

<style>
.showRightPanel {
  overflow: hidden;
  position: relative;
  width: calc(100% - 15px);
}
.el-step__description.is-wait, .el-step__description.is-finish {
  padding-right: 0;
}
</style>

<style lang="scss" scoped>
.rightPanel-background {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
  background: rgba(0, 0, 0, .2);
  z-index: -1;
}

.rightPanel {
  width: 100%;
  max-width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
  transition: all .25s cubic-bezier(.7, .3, .1, 1);
  transform: translate(100%);
  background: #fff;
  z-index: 40000;
}

.show {
  transition: all .3s cubic-bezier(.7, .3, .1, 1);

  .rightPanel-background {
    z-index: 20000;
    opacity: 1;
    width: 100%;
    height: 100%;
  }

  .rightPanel {
    transform: translate(0);
  }
}

.handle-button {
  width: 48px;
  height: 48px;
  position: absolute;
  left: -48px;
  text-align: center;
  font-size: 24px;
  border-radius: 6px 0 0 6px !important;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  line-height: 48px;
  i {
    font-size: 24px;
    line-height: 48px;
  }
}
</style>
